<template>
  <div class="home">
    <HomeHeader />

    <van-tabs v-model="activeCategoryIndex" sticky>
      <van-tab v-for="item in categoryList" :title="item.name" :key="item.id">
        <!-- 5, 把文章数组传给 文章组件 进行遍历 -->
        <van-list
          :immediate-check="false"
          v-model="item.loading"
          :finished="item.finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <PostItem
            :article="item"
            v-for="item in item.postList"
            :key="item.id"
          />
        </van-list>
      </van-tab>
    </van-tabs>
    <!-- <Dome /> -->
  </div>
</template>

<script>
import HomeHeader from "@/components/HomeHeader";
import PostItem from "@/components/PostItem";
export default {
  components: {
    HomeHeader,
    PostItem,
  },
  data() {
    return {
      activeCategoryIndex: 0,
      categoryList: [],
    };
  },
  watch: {
    // 此变量为栏目 当前激活标签对应的索引值
    activeCategoryIndex(newVal) {
      const currentCategory = this.categoryList[this.activeCategoryIndex];
      if (newVal == this.categoryList.length - 1) {
        console.log(1);
        this.$router.push("/manage");
      } else {
        // 当文章列表被加载出来后postList的长度就不再为0了  再次点击可以不用 请求
        if (currentCategory.postList.length === 0) {
          this.loadPost();
        }
      }
    },
  },
  created() {
    // 若我本地已经有了栏目数据 就不用了请求了  构造一个res.data.data  实现无缝连接逻辑
    if (localStorage.getItem("delcategoryList")) {
      const res = {
        data: {
          data: JSON.parse(localStorage.getItem("delcategoryList")),
        },
      };
      this.categoryList = res.data.data.map((item) => {
        return {
          // 1, ...item 相当于复制了一份 栏目数组
          ...item,
          // 2, 只是为他添加了一个储存文章的空数组 文章请求的时候为里面对应的 id 添加对应的文章
          postList: [],
          pageIndex: 1,
          pageSize: 6,
          loading: false,
          finished: false,
        };
      });
      this.categoryList.push({
        name: "",
      });
      console.log(this.categoryList);
      this.loadPost();
    } else {
      this.$axios({
        url: "/category",
      }).then((res) => {
        this.categoryList = res.data.data.map((item) => {
          return {
            // 1, ...item 相当于复制了一份 栏目数组
            ...item,
            // 2, 只是为他添加了一个储存文章的空数组 文章请求的时候为里面对应的 id 添加对应的文章
            postList: [],
            pageIndex: 1,
            pageSize: 6,
            loading: false,
            finished: false,
          };
        });
        this.categoryList.push({
          name: "",
        });
        console.log(this.categoryList);
        this.loadPost();
      });
    }
  },
  methods: {
    onLoad() {
      const currentCategory = this.categoryList[this.activeCategoryIndex];
      currentCategory.pageIndex += 1;
      currentCategory.loading = false;
      this.loadPost();
    },
    loadPost() {
      // 用变量储存好带有文章列表空数组的对象
      const currentCategory = this.categoryList[this.activeCategoryIndex];
      // 3,把栏目数组 变量 出来
      this.$axios({
        url: "/post",
        params: {
          //3.1,取出里面的id去请求对应的文章
          category: currentCategory.id,
          pageIndex: currentCategory.pageIndex,
          pageSize: currentCategory.pageSize,
        },
      }).then((res) => {
        console.log(res);
        //4, 请求回来的文章 储存 在栏目数组里的空文章数组里
        currentCategory.postList = [
          ...currentCategory.postList,
          ...res.data.data,
        ];
        console.log(currentCategory.postList);
        currentCategory.loading = false;
        // 因为上面定义了一个页面可以显示6条文章
        // 当请求回来的文章数量不够时  告知Last组件
        if (res.data.data.length < currentCategory.pageSize) {
          currentCategory.finished = true;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .van-tab:nth-last-child(2) {
  background-color: #fff;
  position: sticky;
  right: -8px;
  line-height: 44px;
  width: 44px;
  /deep/ .van-tab__text:last-child {
    border-right: 2px solid #888;
    border-bottom: 2px solid #888;
    transform: rotate(45deg);
    width: 10px;
    height: 10px;
  }
}
</style>
